<script setup>
import { ElMessage } from 'element-plus'
import { reactive } from 'vue'
import { loginService } from '../api/user'
import { adminLoginService } from '../api/admin'
import router from '../router';



const form = reactive({
    id: '',
    password: '',
    userType: ''
})

async function getRes(res) {
    ElMessage.success('登录成功')
    localStorage.setItem('Authorization', res.data)
    if (form.userType === 'user') {
        router.push('/')
    } else {
        router.push('/admin')
    }
}

const login = async () => {
    let result
    if (form.userType === 'user') {
        result = await loginService(form.id, form.password)
    } else if (form.userType === 'admin') {
        result = await adminLoginService(form.id, form.password)
    } else {
        ElMessage.warning('不存在的用户类型')
        return
    }
    await getRes(result)
}

</script>


<template>
    <div
        style="background-image: url('../../public/background.jpg');background-size: cover;width: 100%;height:100vh;overflow: hidden;">
        <div style="background-color: rgb(240,248,255,0.85);width: 500px;border-radius: 25px;margin:auto;">
            <div style="width: 400px;margin: 150px auto;border-radius: 25px;">
                <div style="color:rgb(0, 0, 0);font-size: 30px;text-align: center;padding: 30px;">欢 迎 登 录</div>
                <el-form :model="form">
                    <el-form-item>
                        <el-input style="height: 40px;" prefix-icon="user" v-model="form.id" placeholder="输入您的账号"
                            autofocus="true" clearable>
                            <template #append>
                                <el-select v-model="form.userType" placeholder="用户类型" style="width: 120px;"
                                    size="large">
                                    <el-option label="用户" value="user" />
                                    <el-option label="管理员" value="admin" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input style="height: 40px;" prefix-icon="lock" type="password" v-model="form.password"
                            placeholder="输入您的密码" show-password clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login" style="width: 100%;padding: 17px;font-size:20px;">登
                            录</el-button>
                    </el-form-item>
                </el-form>
                <div style="margin-top: 30px;padding-bottom: 40px;">
                    <span style="float: left;">
                        <router-link :to="{ name: 'register' }" class="find">用户注册</router-link>
                    </span>
                    <span style="float: right;">
                        <router-link :to="{ name: 'findPassword' }" class="find">找回密码</router-link>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.find {
    text-decoration: none;
    color: black;
}

.find:hover {
    color: rgb(0, 191, 255);
    text-decoration: underline;
}
</style>